import useWebAnimations from "@wellyshen/use-web-animations";
import React, { useEffect } from "react";

export default function Circle(props) {
  const { ref, animate } = useWebAnimations();
  const { ref: ref2, animate: animate2 } = useWebAnimations();
  useEffect(() => {
    // console.log(props.posx, props.posy, props.number);
    animate({
      keyframes: {
        transform: `translate(${props.posx}vw,${props.posy * 70 + 70}px)`,
      },
      animationOptions: { duration: 300, fill: "forwards" },
    });
    animate2({
      keyframes: {
        transform: `translate(${props.posx}vw,${props.posy * 70 + 78}px)`,
      },
      animationOptions: { duration: 300, fill: "forwards" },
    });
  }, [props.posx, props.posy]);

  return (
    <>
      <circle
        ref={ref}
        r="25"
        stroke={props.color}
        strokeWidth={2}
        fill="white"
      ></circle>
      <text
        style={{ fontSize: "20px" }}
        textAnchor="middle"
        ref={ref2}
        fill={props.color}
      >
        {props.number}
      </text>
    </>
  );
}
